<template>
  <div class="mainContent">
    <div class="oneStepProgress">
      <!-- 第一步 -->
      <div
        v-if="ruleForm.property_type==1 || ruleForm.property_type==2"
        class="pregoss rowFlex allCenter"
      >
        <div class="stepDiv rowFlex allCenter">
          <span class="step">1</span>
          <div class="text">
            <p class="title">基础信息</p>
            <p class="sub">基础+说明</p>
          </div>
        </div>
        <div class="line"></div>
        <div class="stepDiv rowFlex allCenter">
          <span class="stepLine">2</span>
          <div class="text">
            <p class="title2">剧集上传</p>
            <p class="sub">上传+确认</p>
          </div>
        </div>
      </div>
      <div class="content">
        <el-form
          ref="ruleForm"
          label-width="100px"
          label-position="top"
          :model="ruleForm"
          class="ruleForm"
          :rules="rules"
        >
          <div class="elFormContent">
            <el-form-item
              label="合同名称"
              class="inputItem"
              prop="contract_name"
            >
              <el-input
                v-model="ruleForm.contract_name"
                clearable
                :disabled="!(ruleForm.property_type == 1)"
                placeholder="请输入合同名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="短剧名称"
              class="inputItem"
              prop="title"
            >
              <template slot="label">
                短剧名称
                <el-tooltip
                  class="item"
                  effect="dark"
                  placement="top"
                >
                  <div
                    slot="content"
                    class="tooltipLine"
                  >
                    <p>1、已过审短剧不支持修改名称</p>
                    <p>2、修改名称会影响已用此名称的投放素材，请谨慎操作</p>
                  </div>
                  <i
                    class="el-icon-question"
                    style="margin-left:2px;font-size:16px;"
                  ></i>
                </el-tooltip>
              </template>
              <el-input
                v-model="ruleForm.title"
                clearable
                placeholder="请输入短剧名称"
              ></el-input>
            </el-form-item>
            <el-form-item class="inputItem">
              <template slot="label">
                短剧别名
                <el-tooltip
                  class="item"
                  effect="dark"
                  placement="top"
                >
                  <div
                    slot="content"
                    class="tooltipLine"
                  >
                    <p>用以记录外部平台(如快手、爱奇艺等)短剧名称维护</p>

                  </div>
                  <i
                    class="el-icon-question"
                    style="margin-left:2px;font-size:16px;"
                  ></i>
                </el-tooltip>
              </template>
              <div class="alias">
                <div class="alias_list">
                  <!-- ruleForm.alias -->
                  <span
                    v-for="(item, index) in ruleForm.alias"
                    :key="index"
                    class="el-tag el-tag--info el-tag--mini el-tag--light alias_item"
                  >
                    <span class="alias_item_text">{{ item }}</span>
                    <i
                      class="el-tag__close el-icon-close my_close"
                      @click="ondelalias(index)"
                    ></i>
                  </span>
                  <input
                    v-model="aliasValue"
                    type="text"
                    class="alias_input"
                    :disabled="!(ruleForm.property_type == 1)"
                    @keydown="onInputKey"
                  >
                </div>
                <div class="alias_add">
                  <el-button
                    :disabled="!(ruleForm.property_type == 1)"
                    type="text"
                    size="medium"
                    @click="editalias()"
                  >编辑</el-button>
                </div>
              </div>

            </el-form-item>
            <el-form-item
              label="短剧类型"
              class="inputItem"
              prop="category"
            >
              <!-- 合同剧创建的时候可以编辑 -->
              <el-radio-group
                v-model="ruleForm.category"
                style="width:100%;"
                :disabled="!(ruleForm.property_type == 1 && ruleForm.isCreatePlaylet)"
              >
                <el-radio
                  v-for="item in categoryList"
                  :key="item.value"
                  :label="item.value"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="ruleForm.category == 7 || ruleForm.category == 5"
              class="award_date_start"
              prop="award_date_start"
              :rules="[
                { required: true, validator:validateAwardStart, trigger: 'blur'},
              ]"
            >
              <template slot="label">
                激励时间
                <el-tooltip
                  class="item"
                  effect="dark"
                  placement="top"
                >
                  <div
                    slot="content"
                    class="tooltipLine"
                  >
                    <p>时间只能选择今日及之后时间，如需修改过去时间联系技术处理。</p>
                  </div>
                  <i
                    class="el-icon-question"
                    style="margin-left:2px;font-size:16px;"
                  ></i>
                </el-tooltip>
              </template>
              <div class="award_date_set">
                <BiDatePicker
                  v-model="ruleForm.award_date_start"
                  :disabled="!(ruleForm.property_type == 1) || newData(ruleForm.award_date_start) < (newData() - 86400000)"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                  style="width: 250px;height: 32px;"
                  :picker-option="awardStartPickerOptions"
                ></BiDatePicker>
                ~
                <BiDatePicker
                  v-if="ruleForm.award_date_end || awardData "
                  v-model="ruleForm.award_date_end"
                  :disabled="!(ruleForm.property_type == 1)"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="至今"
                  style="width: 250px;height: 32px;"
                  :picker-option="awardEndPickerOptions"
                ></BiDatePicker>
                <div
                  v-else
                  style="width: 250px;"
                >
                  至今
                  <el-button
                    :disabled="!(ruleForm.property_type == 1)"
                    type="text"
                    size="medium"
                    style="height: 32px;padding:0;"
                    @click="onSetAwardDate(row)"
                  >(点击修改)</el-button>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              label="短剧标签"
              class="inputItem"
              :prop="ruleForm.property_type == 1?'tag_id':''"
            >
              <!-- 合同剧创建的时候可以编辑 -->
              <el-select
                v-model="ruleForm.tag_id"
                style="width:100%;"
                filterable
                remote
                clearable
                multiple
                :disabled="!(ruleForm.property_type == 1)"
                placeholder="请选择标签"
              >
                <el-option
                  v-for="item in tagSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="是否为推荐剧"
              class="inputItem"
              :prop="ruleForm.property_type == 1?'is_recommend':''"
            >
              <!-- 合同剧创建的时候可以编辑 -->
              <el-switch
                v-model="ruleForm.is_recommend"
                :disabled="!(ruleForm.property_type == 1 && ruleForm.isCreatePlaylet)"
                active-value="1"
                inactive-value="0"
                active-color="#13ce66"
                inactive-color="#dcdfe6"
              >
              </el-switch></el-form-item>
            <el-form-item
              v-if="ruleForm.category == 5"
              label="剧本上线时间"
              class="inputItem"
              prop="online_time"
            >
              <!-- 合同剧 可修改 -->
              <el-date-picker
                v-model="ruleForm.online_time"
                :disabled="!(ruleForm.property_type == 1)"
                type="date"
                style="width:100%;"
                placeholder="请选择"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="短剧男女频"
              class="inputItem"
              prop="gender_type"
              style="margin-left:0px;"
            >
              <!-- 合同剧新建的时候可以 -->
              <el-radio-group
                v-model="ruleForm.gender_type"
                style="width:230px;"
                :disabled="!(ruleForm.property_type == 1 && ruleForm.isCreatePlaylet)"
              >
                <el-radio
                  v-for="item in genderList"
                  :key="item.value"
                  :label="item.value"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 马甲剧的时候不能修改其他都可以 -->
            <el-form-item
              label="连载状态"
              class="inputItem"
              prop="status"
              style="margin-left:0px;"
            >
              <el-select
                v-model="ruleForm.status"
                clearable
                :disabled="ruleForm.property_type == 3"
                style="width:100%;"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 都可以修改 -->
            <el-form-item
              label="短剧封面"
              prop="cover"
              class="playletCover"
            >
              <upload
                tip="建议图片比例 9:16，图片大小不能超过2MB，分辨率不能
          超过1080*1080，支持jpg、jpeg、png格式"
                type="image"
                :url="ruleForm.cover"
                @resultUpload="resultUpload"
              />
            </el-form-item>

          </div>
          <div class="upload">
            <el-form-item
              label="短剧简介"
              class="inputItem"
              prop="introduce"
            >
              <el-input
                v-model="ruleForm.introduce"
                clearable
                maxlength="100"
                :disabled="ruleForm.property_type == 3"
                type="textarea"
                placeholder="请输入简介内容"
                :show-word-limit="true"
                style="width:100%;height: 100px;"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="演员信息(需填写2-5位演员)"
              class="inputItem"
            >
              <template slot="label">
                <div class="actor">
                  <div class="actor_label">
                    <div>演员信息(需填写2-5位演员)</div>
                    <el-button
                      type="primary"
                      :disabled="!(ruleForm.property_type == 1)"
                      @click="onAddactor"
                    > 添加 </el-button>
                  </div>
                </div>
              </template>
              <template>
                <BiTable
                  :data="ruleForm.actor"
                  size="medium"
                  :column="actorColums"
                  fixed="sticky"
                  fixed-offset="50"
                  :auto-scroll="false"
                >
                  <template v-slot:zip="{row}">
                    <el-button
                      type="text"
                      :disabled="!(ruleForm.property_type == 1)"
                      size="medium"
                      @click="editactor(row)"
                    >编辑</el-button><el-button
                      type="text"
                      :disabled="!(ruleForm.property_type == 1)"
                      size="medium"
                      @click="deleteactor(row)"
                    >删除</el-button>
                  </template>
                </BiTable>
              </template>
            </el-form-item>
            <el-form-item class="inputItem">
              <template slot="label">
                腾讯商品库三级分类
                <el-tooltip
                  class="item"
                  effect="dark"
                  placement="top"
                >
                  <div
                    slot="content"
                    class="tooltipLine"
                  >
                    <p>仅用于腾讯(投放)商品入库，对平台功能无影响</p>
                  </div>
                  <i
                    class="el-icon-question"
                    style="margin-left:2px;font-size:16px;"
                  ></i>
                </el-tooltip>
              </template>
              <template>
                <el-cascader
                  ref="cascaderAddr"
                  v-model="playlet_category"
                  style="width: 100%;"
                  :props="{
                    value : 'id',
                    label : 'name'
                  }"
                  :disabled="!(ruleForm.property_type == 1)"
                  :options="options"
                  @change="handleChange"
                ></el-cascader>
              </template>
            </el-form-item>
            <h4>内容方信息</h4>
            <div class="submitText">
              <el-form-item
                label="制作方"
                class="inputItem"
                prop="producer_id"
                style="margin-left:0px;"
              >
                <el-select
                  v-model="ruleForm.producer_id"
                  clearable
                  :disabled="!(ruleForm.property_type == 1 && ruleForm.isCreatePlaylet)"
                  filterable
                  remote
                  style="width:100%;"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in producerList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="版权方"
                class="inputItem"
                prop="copyright_id"
                style="margin-left:0px;"
              >
                <el-select
                  v-model="ruleForm.copyright_id"
                  clearable
                  :disabled="!(ruleForm.property_type == 1 && ruleForm.isCreatePlaylet)"
                  filterable
                  style="width:100%;"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in copyrightList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="编剧方"
                class="inputItem"
                prop="scriptwriter_id"
                style="margin-left:0px;"
              >
                <el-select
                  v-model="ruleForm.scriptwriter_id"
                  clearable
                  :disabled="!(ruleForm.property_type == 1 && ruleForm.isCreatePlaylet)"
                  filterable
                  style="width:100%;"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in scriptwriterList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-form-item
              label="审核类型"
              prop="type"
            >
              <!-- 不允许编辑 -->
              <el-radio-group
                v-model="ruleForm.type"
                :disabled="!(ruleForm.property_type == 1 && ruleForm.isCreatePlaylet)"
              >
                <el-radio :label="1">非审核剧</el-radio>
                <el-radio :label="2">审核剧 <span style="color:rgb(222, 26, 26);">（需要向微信或抖音平台提交审核的备案短剧）</span></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="ruleForm.type==2"
              class="inputItem"
            >
              <div class="submitText">
                <el-form-item
                  label="制作方"
                  class="inputItem"
                  prop="producer"
                  label-width="140px"
                >
                  <el-input
                    v-model="ruleForm.producer"
                    clearable
                    placeholder="请输入制作方"
                    :disabled="ruleForm.property_type == 3"
                    style="width:100%;"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="编号选取"
                  class="inputItem"
                  prop="number_type"
                  label-width="140px"
                >
                  <el-radio-group
                    v-model="ruleForm.number_type"
                    :disabled="ruleForm.property_type == 3"
                  >
                    <el-radio :label="1">剧目备案编号</el-radio>
                    <el-radio :label="2">网络剧片发行许可证编号</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  v-if="ruleForm.number_type==1"
                  label="剧目备案号"
                  class="inputItem"
                  prop="certificate_number"
                  label-width="140px"
                >
                  <el-input
                    v-model="ruleForm.certificate_number"
                    clearable
                    :disabled="ruleForm.property_type == 3"
                    placeholder="请输入剧目备案号"
                    style="width:250px;"
                  ></el-input>
                </el-form-item>
                <div
                  v-if="ruleForm.number_type==2"
                  class="lineHeight"
                >
                  <el-form-item
                    label="网络剧片发型许可证编号"
                    class="inputItem"
                    prop="certificate_number"
                    label-width="140px"
                  >
                    <el-input
                      v-model="ruleForm.certificate_number"
                      clearable
                      :disabled="ruleForm.property_type == 3"
                      placeholder="请输入"
                      style="width:100%;"
                    ></el-input>
                  </el-form-item>
                  <div class="upload lineHeight">
                    <el-form-item
                      label="网络剧片发行许可证(原件)"
                      prop="publish_license_image"
                      label-width="140px"
                      class="playletCover"
                    >
                      <upload
                        v-if="ruleForm.property_type==1 || ruleForm.property_type==2"
                        tip="建议图片大小在2M以内，支持jpg、jpeg、png格式"
                        type="image"
                        :url="ruleForm.publish_license_image"
                        @resultUpload="resultUploadImage"
                      />
                      <div v-else>
                        <el-image
                          :src="ruleForm.publish_license_image"
                          class="uploadAvatar"
                        ></el-image>
                      </div>
                    </el-form-item>
                  </div>

                </div>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="dialog-footer rowFlex">
      <div class="btns">
        <el-button
          class="btn"
          @click="close"
        >取 消</el-button>
        <el-button
          :loading="loading"
          class="btn"
          type="primary"
          @click="nextStep"
        > {{ (ruleForm.property_type==1 || ruleForm.property_type==2)?'下一步':'确定' }} </el-button>
      </div>
    </div>
    <BiDrawer
      v-model="actorDrawer.show"
      :drawer-title="actorDrawer.title"
      :row-info="actorDrawer.row"
      :component="Addactor"
      :append-to-body="true"
      drawer-size="600px"
      @ok="actorSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="alias.show"
      :drawer-title="alias.title"
      :row-info="alias.row"
      :component="Alias"
      :append-to-body="true"
      drawer-size="600px"
      @ok="aliasSubmit"
    ></BiDrawer>
  </div>

</template>

<script>
import upload from '@/common/component/upload.vue'
import { addPlaylet, partnerList, contractList, playletDetails, addVersionPlaylet, getPlayletCategory } from '@/api/content'
import { mapState, mapMutations, mapActions } from 'vuex'
import { commonData } from '@/api/common'
import Addactor from './Addactor.vue'
import Alias from './alias.vue'
import { off } from 'bi-element-ui'
/*
1.新增的时候
  版本剧要选择一个合同剧 除了名称和封面 其他的都用合同剧的内容且无法更改

2.编辑的时候
  短剧属性无法更改
  合同剧的只有封面和名称 还有短剧类型可以更改 其他的都不能更改
  版本剧除名称和封面 其他都不可更改

*/
export default {
  components: {
    upload
  },
  computed: {
    ...mapState('common', ['categoryList'])
  },
  props: ['rowInfo'],
  data() {
    const validateCover = (rule, value, callback) => {
      if (this.ruleForm.cover == '') {
        callback(new Error(`请上传图片`))
      } else {
        callback()
      }
    }
    const validateAwardStart = (rule, value, callback) => {
      if (this.ruleForm.award_date_end && !this.ruleForm.award_date_start) {
        callback(new Error(`请选择开始日期`))
      } else {
        callback()
      }
    }
    return {
      awardData: false,
      newData: (data) => {
        return data ? new Date(data).getTime() : new Date().getTime()
      },
      validateAwardStart: validateAwardStart,
      awardStartPickerOptions: {
        disabledDate: (time) => {
          if (time.getTime() < Date.now() - 24 * 60 * 1000 * 60) {
            return true
          } else {
            if (this.ruleForm.award_date_end) {
              // console.log(new Date(this.ruleForm.award_date_end).getTime())
              if (time.getTime() < new Date(this.ruleForm.award_date_end).getTime()) {
                return false
              } else {
                return true
              }
            } else {
              return false
            }
          }
        }
      },
      awardEndPickerOptions: {
        disabledDate: (time) => {
          if (time.getTime() < Date.now() - 24 * 60 * 1000 * 60) {
            return true
          } else {
            if (this.ruleForm.award_date_start) {
              console.log(new Date(this.ruleForm.award_date_start).getTime(), time.getTime())
              if (time.getTime() >= new Date(this.ruleForm.award_date_start).getTime() - 86400000) {
                return false
              } else {
                return true
              }
            } else {
              return false
            }
          }
        }
      },
      Addactor: Addactor,
      Alias: Alias,
      aliasValue: '',
      alias: {
        show: false,
        title: '编辑',
        row: {}
      },
      actorDrawer: {
        show: false,
        row: {},
        title: '新增演员'
      },
      loading: false,
      // 版本剧的form值
      propertyForm: {},
      // 合同剧的类型
      lastRuleForm: {},
      tagSelect: [],
      ruleForm: {
        alias: ['第一'],
        title: '',
        cover: '',
        status: '', // 1 更新中 2已完结
        introduce: '',
        type: 2, // 1 非审核剧  2审核剧
        producer: '',
        number_type: 1,
        online_time: '',
        certificate_number: '',
        property_type: 1,
        category: 1,
        gender_type: 1,
        producer_id: '',
        copyright_id: '',
        tag_id: [],
        contract_id: '',
        scriptwriter_id: '',
        contract_name: '',
        publish_license_image: '',
        is_recommend: '0', // 是否为推荐剧
        award_date_end: '',
        award_date_start: '',
        actor: [],
        playlet_category: {
          first_category_id: '',
          first_category_name: '',
          second_category_id: '',
          second_category_name: '',
          third_category_id: '',
          third_category_name: ''
        }
      },
      options: [],
      playlet_category: '',
      contractList: [],
      copyrightList: [],
      producerList: [],
      scriptwriterList: [],
      statusList: [
        { label: '更新中', value: 1 },
        { label: '已完结', value: 2 }
      ],
      genderList: [
        { label: '男频', value: 1 },
        { label: '女频', value: 2 },
        { label: '其他', value: 3 }
      ],
      rules: {
        contract_name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
        title: [{ required: true, message: '请输入短剧名称', trigger: 'blur' }],
        status: [{ required: true, message: '短剧状态', trigger: 'change' }],
        // cover: [{ required: true, validator: validateCover, trigger: 'blur' }],
        introduce: [{ required: true, message: '请输入介绍内容', trigger: 'blur' }],
        type: [{ required: true, message: '请选择短剧类型', trigger: 'change' }],
        producer: [{ required: true, message: '请输入制作方', trigger: 'blur' }],
        number_type: [{ required: true, message: '请选择编号类型', trigger: 'change' }],
        property_type: [{ required: true, message: '请选择短剧属性', trigger: 'change' }],
        category: [{ required: true, message: '请选择短剧类型', trigger: 'change' }],
        gender_type: [{ required: true, message: '请选择短剧男女频', trigger: 'change' }],
        contract_id: [{ required: true, message: '请选择合同剧', trigger: 'change' }],
        producer_id: [{ required: true, message: '请选择制作方', trigger: 'change' }],
        copyright_id: [{ required: true, message: '请选择版权方', trigger: 'change' }],
        scriptwriter_id: [{ required: true, message: '请选择编剧方', trigger: 'change' }],
        certificate_number: [{ required: true, message: '请输入备案编号或许可证编号', trigger: 'blur' }],
        online_time: [{ required: true, message: '请选择剧本上线时间', trigger: 'change' }],
        tag_id: [{ required: true, message: '请选择标签', trigger: 'change' }],
        publish_license_image: [{ required: true, message: '请上传发行许可证图片', trigger: 'change' }]
      },
      actorColums: [
        {
          label: '演员姓名',
          prop: 'actor_name'
        },
        {
          label: '饰演角色',
          prop: 'role_name'
        },
        {
          label: '演员简介',
          prop: 'actor_introduction'
        },
        {
          label: '演员照片',
          prop: 'actor_photo',
          render: (h, { row }) => {
            return <el-image src={row.actor_photo} style='width:50px;border-radius:5px;'></el-image>
          }
        },
        {
          label: '操作',
          prop: 'zip',
          slotScope: true
        }
      ]
    }
  },
  async mounted() {
    this.onGetPlayletCategory()
    this.initInfo()
    this.requestSelectList(2)
    this.requestSelectList(3)
    this.requestSelectList(4)
    this.tagSelect = await this.requestCommonData({ type: 'tag' })
    // this.requestContract()
  },
  methods: {
    ...mapActions('common', ['requestCommonData']),
    aliasSubmit(aliasList) {
      this.ruleForm.alias = aliasList
    },
    onInputKey(e) {
      if (e.key == 'Enter') {
        if (!this.aliasValue) {
          return
        }
        this.ruleForm.alias.push(this.aliasValue)
        this.aliasValue = ''
      }
    },
    ondelalias(index) {
      this.ruleForm.alias.splice(index, 1)
    },
    editalias() {
      this.alias = {
        show: true,
        row: this.ruleForm.alias,
        title: '编辑'
      }
    },
    onSetAwardDate() {
      this.awardData = true
    },
    async onGetPlayletCategory() {
      const res = await getPlayletCategory()
      if (res.status_code === 1) {
        this.options = res.data
      }
    },
    handleChange(e) {
      if (!e) {
        this.ruleForm.playlet_category = ''
      }
      this.ruleForm.playlet_category = {}
      const labels = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathNodes
      this.$set(this.ruleForm.playlet_category, 'first_category_id', e[0])
      this.$set(this.ruleForm.playlet_category, 'first_category_name', labels[0].label)
      this.$set(this.ruleForm.playlet_category, 'second_category_id', e[1])
      this.$set(this.ruleForm.playlet_category, 'second_category_name', labels[1].label)
      this.$set(this.ruleForm.playlet_category, 'third_category_id', e[2])
      this.$set(this.ruleForm.playlet_category, 'third_category_name', labels[2].label)
      console.log(this.ruleForm.playlet_category)
    },
    onAddactor() {
      if (this.ruleForm.actor.length === 5) {
        this.$message.warning('演员信息应不多于五位')
        return
      }
      this.actorDrawer = {
        show: true,
        row: {},
        title: '新增演员'
      }
    },
    deleteactor(row) {
      const index = this.ruleForm.actor.findIndex((item) => {
        return item == row
      })
      this.ruleForm.actor.splice(index, 1)
    },
    editactor(row) {
      const index = this.ruleForm.actor.findIndex((item) => {
        return item == row
      })
      console.log(index)
      this.actorDrawer = {
        show: true,
        row: { ...row, index },
        title: '编辑演员'
      }
    },
    actorSubmit(row) {
      console.log(row, '*--*-*-*-*-*-*-*-')
      if (row.index || row.index === 0) {
        delete row.data.index
        this.$set(this.ruleForm.actor, row.index, row.data)
      } else {
        console.log(this.ruleForm.actor)
        this.ruleForm.actor.push(row.data)
      }
    },
    initInfo() {
      let playletInfo = {}
      this.rowInfo.property_type = Number(this.rowInfo.property_type)
      this.rowInfo.category = Number(this.rowInfo.category)
      this.rowInfo.gender_type = Number(this.rowInfo.gender_type)
      this.rowInfo.status = Number(this.rowInfo.status)
      this.rowInfo.type = Number(this.rowInfo.type)
      this.rowInfo.number_type = Number(this.rowInfo.number_type)
      this.rowInfo.alias = this.rowInfo.alias || []
      if (this.rowInfo.tags && this.rowInfo.tags.length) {
        this.rowInfo.tag_id = this.rowInfo.tags.map((item) => {
          if (item.tag_id && item.tag_title) {
            return Number(item.tag_id)
          }
        })
      }
      this.rowInfo.contract_id = this.rowInfo.id
      playletInfo = JSON.parse(JSON.stringify(this.rowInfo))
      this.ruleForm = playletInfo
      if (this.ruleForm.id) {
        this.ruleForm.award_date_start == '' ? (this.awardData = true) : false
      } else {
        this.awardData = true
      }
      // this.ruleForm.award_date_start = '2024-04-9'
      if (!playletInfo.playlet_category) {
        this.ruleForm.playlet_category = {}
      } else {
        this.playlet_category = [playletInfo.playlet_category.first_category_id * 1, playletInfo.playlet_category.second_category_id * 1, playletInfo.playlet_category.third_category_id * 1]
      }
      console.log(this.ruleForm, '*************************')
    },
    close() {
      this.$router.push(`${this.$route.path}`)
      this.$emit('cancel')
    },
    requestContract() {
      contractList().then((res) => {
        this.contractList = res.data
      })
    },
    // 添加版本剧
    addVersionPlaylet() {
      const { contract_id, title, cover } = this.ruleForm
      const data = {
        contract_playlet_id: contract_id,
        title,
        cover
      }
      addVersionPlaylet(data).then((res) => {
        if (res.status_code == 1) {
          this.$message.success(res.msg)
          this.$emit('submit')
          this.close()
        }
      })
    },
    // 添加合同剧
    addProviewPlaylet() {
      const data = JSON.parse(JSON.stringify(this.ruleForm))
      data.online_time = this.$moment(this.ruleForm.online_time).format('YYYY-MM-DD')
      if (this.rowInfo.property_type == 2 && this.rowInfo.isCreatePlaylet) {
        // 新增版本剧 传入之前合同剧的id
        delete data.id
        data.main_playlet_id = this.ruleForm.id
      }
      if (data.type === 1) {
        // 非审核剧
        delete data.producer
        delete data.number_type
        delete data.certificate_number
        delete data.publish_license_image
      } else {
        // 审核剧
        if (data.number_type === 1) {
          delete data.publish_license_image
        }
      }
      this.loading = true
      addPlaylet(data).then(
        (res) => {
          this.loading = false
          if (res.status_code === 1) {
            this.$message.success(res.msg)
            if (data.property_type == 3) {
              this.$emit('submit')
              this.close()
            } else {
              this.$router.push(`${this.$route.path}?id=${res.data.id}`)
              this.$emit('submit')
            }
          }
        },
        (err) => {
          this.loading = false
        }
      )
    },
    nextStep() {
      if (!this.ruleForm.cover || this.ruleForm.cover === '') {
        this.$message.warning('请上传短剧封面')
        return false
      }
      if (this.ruleForm.actor.length < 2) {
        this.$message.warning('请设置演员信息且不少于两位')
        return false
      }
      if (this.ruleForm.actor.length > 5) {
        this.$message.warning('演员信息应不多于五位')
        return false
      }
      if (!this.ruleForm.playlet_category.third_category_id) {
        this.$message.warning('请选择腾讯商品库三级分类')
        return false
      }
      // isCreatePlaylet true 新增 false 编辑
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.ruleForm.property_type == 1) {
            // 合同剧
            this.addProviewPlaylet()
          } else if (this.ruleForm.property_type == 2 && !this.ruleForm.isCreatePlaylet) {
            // 编辑版本剧
            this.addProviewPlaylet()
          } else if (this.ruleForm.property_type == 2 && this.ruleForm.isCreatePlaylet) {
            // 新增版本剧
            this.addProviewPlaylet()
          } else if (this.ruleForm.property_type == 3 && !this.ruleForm.isCreatePlaylet) {
            // 编辑马甲剧
            this.addProviewPlaylet()
          } else if (this.ruleForm.property_type == 3 && this.ruleForm.isCreatePlaylet) {
            // 新增马甲剧
            this.addVersionPlaylet()
          } else {
          }
        }
      })
    },
    // 上传的结果
    resultUpload(data, type) {
      console.log(data, type)
      this.ruleForm.cover = data
    },
    resultUploadImage(data, type) {
      this.ruleForm.publish_license_image = data
    },
    requestSelectList(type) {
      const data = {
        name: '',
        type: type
      }
      partnerList(data).then((res) => {
        if (type === 2) {
          this.producerList = res.data.data
        } else if (type === 3) {
          this.copyrightList = res.data.data
        } else if (type === 4) {
          this.scriptwriterList = res.data.data
        }
      })
    }
  }
}
</script>
  <style lang="scss" scoped>
.alias {
  display: flex;
  align-content: center;
  justify-content: space-between;
  .alias_list {
    width: 95%;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    // padding: 0 5px;
    .alias_item {
      margin-top: 5px;
      margin-left: 5px;
      max-width: none !important;
      display: flex;
      align-items: center;
      .alias_item_text {
        display: inline-block;
        max-width: 600px;
        white-space: nowrap; /* 禁止自动换行 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
        word-break: break-all;
      }

      /* 允许在任意字符间断开（可选，如果你想在任意字数换行） */
    }
  }
  .alias_input {
    border: none;
    border-style: none;
    outline: none;
    flex: 1;
    height: 32px;
  }
  .alias_input:disabled {
    width: 100%;
    position: absolute;
    height: 100%;
    cursor: not-allowed;
  }
}
.award_date_start {
  ::v-deep.el-form-item__label::before {
    content: none !important;
  }
}
.award_date_get {
  display: flex;
  width: 550px;
  justify-content: space-between;
}
.award_date_set {
  display: flex;
  width: 550px;
  justify-content: space-between;
}
::v-deep .el-form-item__label {
  display: flex;
  width: 100%;
  align-items: center;
}
.actor {
  flex: 1;
  display: inline-block;
  .actor_label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.oneStepProgress {
  width: 950px;
  height: 100%;
  overflow: auto;
  padding-bottom: 80px;
  ::v-deep .avatar-uploader .el-upload:hover {
    border: 1px dashed #06c261 !important;
  }
}
.uploadAvatar {
  width: 80px;
}
.elFormContent {
  width: 100%;
}
.playletCover {
  ::v-deep .avatar-uploader {
    display: flex;
    align-items: center;
  }
  ::v-deep .el-upload__tip {
    width: 350px;
    margin-left: 20px;
  }
}
.pregoss {
  .stepDiv {
    width: auto;
    height: 80px;
    .step,
    .stepLine {
      width: 32px;
      height: 32px;
      border-radius: 16px;
      background: #06c261;
      font-size: 14px;
      color: #fff;
      text-align: center;
      line-height: 32px;
      margin-right: 10px;
    }
    .stepLine {
      color: rgba(0, 0, 0, 0.15);
      border: 1px solid rgba(0, 0, 0, 0.15);
      background: #fff;
    }
    .text {
      P {
        line-height: 20px;
        margin: 0;
      }
      .title,
      .title2 {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
      }
      .title2 {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
      }
      .sub {
        margin-top: 4px;
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(153, 153, 153, 0.85);
      }
    }
  }
  .line {
    width: 200px;
    height: 1px;
    background: rgba(0, 0, 0, 0.15);
    margin: 0 20px;
  }
}
.content {
  padding: 20px;
  ::v-deep .el-textarea__inner {
    height: 100px;
  }
  .ruleForm {
  }
  .submitText {
    width: 100%;
    height: auto;
    padding: 20px;
    background: #f7f8fa;
  }
}
.mainContent {
  height: 100%;
  position: relative;
  ::v-deep .el-form-item__label {
    font-weight: 600;
  }
}
.dialog-footer {
  background: #fff;
  z-index: 100;
}
</style>
